import React, { Component } from 'react'
import { Card, Table, Button, message } from 'antd'
import { findRoles, deleteRoles } from '../../api/role'
import Add from './Add'
import Auth from './auth.jsx'

export default class Role extends Component {
  state = {
    data: [],
  }
  componentDidMount() {
    this.getAllRoles()
  }

  // 获取所有角色
  getAllRoles = () => {
    findRoles().then((res) => {
      this.setState({ data: res.data.data })
      // console.log(res.data.data)
    })
  }

  // 删除
  deleteOne = (id) => {
    deleteRoles({ id }).then((res) => {
      message.success(res.data.msg)
      this.getAllRoles()
      // console.log(res)
    })
    // console.log(id)
  }

  render() {
    let { data } = this.state
    const columns = [
      {
        title: '角色',
        key: 'name',
        dataIndex: 'name',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '授权人',
        dataIndex: 'authUser',
        key: 'authUser',
      },
      {
        title: '授权日期',
        dataIndex: 'updateDate',
        key: 'updateDate',
      },

      {
        title: '操作',
        key: 'action',
        render: (value) => (
          <>
            <Button type="link" onClick={() => this.deleteOne(value._id)}>
              删除
            </Button>
            &nbsp;&nbsp;&nbsp;
            <Auth value={value} refresh={this.getAllRoles}></Auth>
          </>
        ),
      },
    ]
    return (
      <div className="site-card-border-less-wrapper">
        <Card
          title={<Add add={this.getAllRoles} />}
          bordered={false}
          style={{ width: '100%' }}
        >
          <Table
            rowKey="_id"
            scroll={{ y: '350px' }}
            columns={columns}
            dataSource={data}
          />
        </Card>
      </div>
    )
  }
}
